<template>
	<view class="repair">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="报事报修" :autoBack="true" leftIconColor="#fff" bgColor="#0B868E">
			</u-navbar>
		</view>

		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #FEFEFE;">
			<!-- 维修类型 -->
			<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx;">

								<u-form-item label="当前房屋" prop="house" required labelWidth="70" borderBottom
									@click="showFloor = true;" ref="item1">
									<u-input disabled v-model="model1.house" placeholder="请选择当前房屋" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;"></u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>

								<u-form-item label="联系人" prop="name" required labelWidth="70" borderBottom>
									<u-input v-model="model1.name" placeholder="请填写联系人" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<!-- hideKeyboard() -->
								<u-form-item label="联系电话" prop="tel" required labelWidth="70" borderBottom
									@click="telKeyShow = true; ">
									<u-input disabled v-model="model1.tel" placeholder="请填写联系电话" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="临时联系" prop="name1" labelWidth="70" borderBottom>
									<u-input v-model="model1.name1" placeholder="请填写临时联系人" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="临时电话" prop="tel1" labelWidth="70">
									<u-input v-model="model1.tel1" placeholder="请填写临时电话" border="none"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
							</view>
						</view>
					</view>
				</view>

				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx;">
								<u-form-item label="维修区域" prop="type_value" labelWidth="70" borderBottom>
									<u-input v-model="typename" disabled border="none" disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="维修类型" prop="type_value" labelWidth="70" borderBottom>
									<u-input v-model="model1.type_value" disabled border="none" disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
								<u-form-item label="预约时间" prop="time" required labelWidth="70"
									@click="showTime = true;">
									<u-input disabled v-model="model1.time" placeholder="请选择预约时间" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;"></u-input>

								</u-form-item>
							</view>
						</view>
					</view>
				</view>

				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 10rpx;">
								<u-form-item label="维修内容" required prop="content" labelWidth="70" borderBottom>

								</u-form-item>
								<view style="margin: 20rpx 0;">
									<u-textarea  v-model="model1.content" placeholder="请简要说明需要维修的事项情况"></u-textarea>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view style="padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 10rpx;">
								<u-form-item label="上传图片" required prop="content" labelWidth="70" borderBottom>

								</u-form-item>
								<view style="margin-top: 20rpx;">
									<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
										multiple :maxCount="9"></u-upload>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-form>
			<u-button :customStyle="btnStyle" @click="repair">确认提交</u-button>

			<u-toast ref="uToast" />
			<u-modal :show="showHouse" title="提示" content='房屋绑定审核中...' :showCancelButton="true" confirmText="重新绑定" cancelText="等待审核" @confirm="bindHouse" @cancel="back"></u-modal>
			<!-- 下拉工具 -->
			<u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择当前房屋" @close="showFloor = false"
				@select="floorSelect">
			</u-action-sheet>
			<u-keyboard mode="number" @confirm="confirmTel" @change="valChange" @backspace="backspace"
				:dotDisabled="true" :show="telKeyShow" @cancel="telKeyShow = false">
			</u-keyboard>
			<u-datetime-picker :show="showTime" v-model="actionsTime" mode="datetime" @confirm="timeSelect"
				@cancel="showTime = false">
			</u-datetime-picker>
		</view>

	</view>
</template>

<script>
	import {
		getFloor
	} from "@/service/userService.js";
	
	import { repair } from "@/service/propertyService.js";
	export default {
		data() {
			return {
				model1: {
					rid:0,
					type_value: '',
					type: '',
					house: '',
					name: '',
					tel: '',
					name1: '',
					tel1: '',
					time: '',
					images: []
				},
				typename:'户内维修',
				fileList1: [],
				showFloor: false,
				showHouse: false,
				telKeyShow: false,
				showTime: false,
				actionsFloor: [],
				actionsTime: Number(new Date()),
				rules: {
					'tel': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'tel1': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},

				btnStyle: {
					width: '94%',
					marginLeft: '3%',
					marginBottom:'30rpx',
					borderRadius: '40rpx',
					marginTop: '100rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				}
			}
		},
		onLoad(options) {
			this.model1.type = options.tid;
			this.model1.type_value = options.typeValue;
			if(options.type==0){
				this.typename = '户内维修';
			}else{
				this.typename='公区维修'
			}
			
			getFloor().then(this.getHouse);
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.model1.images.splice(event.index,1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://admin.gslhzhwy.com/api/upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'smart-property'
						},
						success: (res) => {
							let par = JSON.parse(res.data);
							if (par.code == 1) {
								this.model1.images.push(par.data.url);
							}
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			getHouse(e) {
				if (e.code == 200) {
					this.actionsFloor = e.result;
					// this.model1.house=e.result[0].name;
				} else {
					if(e.msg == '等待审核'){
						this.showHouse = true;
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							message: e.msg,
							complete() {
								uni.navigateTo({
									url:"/pagesMine/house/index"
								})
							}
						})
					}
				}
			},
			bindHouse(){
				uni.navigateTo({
					url:"/pagesMine/house/index"
				})
			},
			back(){
				uni.navigateBack({
					delta: 3
				})
			},
			floorSelect(e) {
				this.model1.house = e.name;
			},
			timeSelect(e) {
				let time = this.result(e.time, e.mode);
				this.model1.time = time;
				this.showTime = false;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.model1.tel += val;

				this.$refs.form1.validateField('tel');
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.model1.tel.length) this.model1.tel = this.model1.tel.substr(0, this.model1.tel.length - 1);
				// console.log(this.value);
			},
			carChange(val) {
				this.model1.car += val;
			},
			confirmTel() {
				this.telKeyShow = false;
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			repair() {
				let par = this.model1;
				repair(par).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
					
							type: 'success',
							message: "提交成功",
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						})
					} else {
						this.$refs.uToast.show({
					
							type: 'error',
							message: res.msg,
							complete() {
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
